<!DOCTYPE html>
<html lang="en">

<head>
  <title>昆明信息港设计部门前端储备库——</title>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="zh-CN" http-equiv="Content-Language">
  <meta content="昆明信息港" name="author">
  <meta content="昆明信息港版权所有" name="Copyright">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="//cdn.bootcss.com/highlight.js/8.0/styles/atelier-dune.light.min.css" rel="stylesheet">
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://v3.bootcss.com/assets/css/docs.min.css">
  <style>
  p {
    text-indent: 2em;
  }
  
  .hljs {
    background: none;
  }
  
  .navbar-brand {
    text-indent: 1000px;
    width: 250px;
    background: url("assets/images/logo.png") left center no-repeat;
    background-size: auto 100%;
  }
  </style>
</head>

<body>
  <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand"></a>
      </div>
      <nav id="bs-navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li>
            <a href="#overview">概述</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="http://www.kunming.cn/" target="_blank">昆明信息港</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="container bs-docs-container">
    <div class="row">
      <div class="col-md-9" role="main">
        <div class="bs-docs-section">
          <h1 id="overview" class="page-header">
                    <a class="anchorjs-link " href="#overview" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons;font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                    综述
                </h1>
          <p class="lead">随部门设计和前端开发人员的增加，长期以来对代码书写未做规范要求，出现了没有添加内页顶部导航和统计代码等问题。为提高团队协作效率，输出高质量的页面方便统计和管理，特制订此规范文档。
          </p>
          <p class="lead">本规范文档一经确认, 设计和前端开发人员必须按本文档规范进行前台页面开发。本文档今后如有不合适的地方可以及时提出, 经讨论决定后可以更改此文档。</p>
        </div>
        <div class="bs-docs-section">
          <h1 id="common" class="page-header">
                     <a class="anchorjs-link " href="#common" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                     通用类
                 </h1>
          <h2 id="common-pageheader">
                    <a class="anchorjs-link " href="#common-pageheader" aria-label="Anchor link for: overview doctype" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                    日常专题类
                </h2>
          <p>
            通用页头规范按照以下代码进行编码
          </p>
          <div class="highlight">
            <pre><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"zh-CN"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
  <span class="nt">&lt;title&gt;<span class="s">专题名称</span>_昆明信息港&lt;/title&gt;</span>
  <span class="nt">&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" &gt;</span>
  <span class="nt">&lt;meta content="zh-CN" http-equiv="Content-Language" &gt;</span>
  <span class="nt">&lt;meta content="昆明信息港" name="author" &gt;</span>
  <span class="nt">&lt;meta content="昆明信息港版权所有" name="Copyright" &gt;</span>
  <span class="nt">&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;</span>
  <span class="nt">&lt;meta name="renderer" content="webkit" /&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
        <span>...</span>
<span class="nt">&lt;/html&gt;</span></code></pre>
          </div>
        </div>
        <div class="bs-docs-section">
          <h1 id="pc" class="page-header">
                     <a class="anchorjs-link " href="#PC" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                     PC类
                 </h1>
          <h2 id="pc-pageheader">
                    <a class="anchorjs-link " href="#PC-pageheader" aria-label="Anchor link for: overview doctype" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                    通用页头页尾插件
                </h2>
          <p>
            由于专题设计配色相对于个性和不可控，对头尾菜单和版权信息也存在挑色的问题，所以定义了头尾配色方案供专题设计和开发使用，并在头部菜单中加入统计代码前端开发调用即可
          </p>
          <div class="bs-callout bs-callout-info" id="callout-tables-striped-ie8">
            <h4>1、设计师需在头尾库中选择一个配色方案，并将配色方案加入到专题设计中；</h4>
            <h4>2、前端开发需在头尾库中找到设计稿头尾对应配色方案，并将代码加到专题页面中；</h4>
            <br>
            <h4>
                    点击查看通用插件demo
                    <a href="pc-pageheader/html/top_bottom_theme.html">示例页面</a>
                  </h4>
          </div>
          <p>
            调用方式:JS，代码示例如下
          </p>
          <div class="highlight">
            <pre><code class="language-html" data-lang="html">
//todos...
                    </code></pre>
          </div>
          <h2 id="pc-pageheader">
                    <a class="anchorjs-link " href="#pc-viewportFix" aria-label="Anchor link for: overview doctype" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                    普通ＰＣ专题手机视窗适配方案
            </h2>
          <div class="bs-callout bs-callout-info" id="callout-tables-striped-ie8">
            <h4>在<code>head</code>标签调用如下代码</h4>
          </div>
          <div class="highlight">
            <pre><code class="language-html" data-lang="javascript">
<span class="nt">&lt;script  type="text/javascript" src="http://img2.kunming.cn/zhuanti/TMDlibrary/js/viewport-fix.js"&gt; &lt;/script &gt;</span>
                    </code></pre>
          </div>
          <div class="bs-docs-section">
            <h1 id="html5" class="page-header">
                     <a class="anchorjs-link " href="#html5" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                     html5类
                 </h1>
            <h2 id="html5-rem">
                    <a class="anchorjs-link " href="#html5-rem" aria-label="Anchor link for: overview doctype" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                    html5页面制作的rem解决方案
                </h2>
            <div class="bs-callout bs-callout-info" id="callout-images-ie-svg">
              <h4>1单屏设计时，如手机站点首页，因为屏幕宽高比原因，尽量不要在页面下部放置重要元素</h4>
              <h4>2h5动态专题，滑屏类特效时，问题同上，会造成部分元素在部分机型上无法显示</h4>
              <h4>3如果用户可操作一直向下滑动，如天猫首页等类似页面，则无影响</h4>
              <br>
              <h4>4编码部分查看<a href="h5RemUsage/index.html" target="_blank">demo页面</a></h4>
            </div>

            <h1 id="up" class="page-header">
                     <a class="anchorjs-link " href="#html5" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                     点赞活动
                 </h1>
                  <div class="bs-callout bs-callout-info" id="callout-images-ie-svg">
                   <h4>1引入js</h4>

              <h4>目前只支持现代浏览器，即不兼容IE8</h4>
              <br>
              <iframe src="chat/index.html" width="100%" height="500px" frameborder="0"></iframe>
 <h4>2调用方法(需要在管理界面新建一个点赞活动)</h4>
               <div class="highlight">
              <pre><code class="language-xml" data-lang="xml">
<span class="nt">&lt;script  type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"&gt; &lt;/script &gt;</span>
<span class="nt">&lt;script  type="text/javascript" src="https://cdn.wilddog.com/sdk/js/2.4.3/wilddog.js"&gt; &lt;/script &gt;</span>
<span class="nt">&lt;script  type="text/javascript" src="http://img2.kunming.cn/zhuanti/TMDlibrary/js/chat-1.17.js"&gt; &lt;/script &gt;</span>
 </code></pre>
            </div>
               <div class="highlight">
              <pre><code class="language-xml" data-lang="javascript">
 var  myApp=new WApp();
    var config={
      upId:'-Ka_b59cBRlBHRdLlvtj',
      roomId:''
    }
    myApp.getInitUp(config.upId,function(count){
      $("#up").html(count)
    })
    $("#button").click(function(){
      myApp.coomitUp()
    })
 </code></pre>
            </div>
            </div>
           
          </div>
          <div class="bs-docs-section">
            <h1 id="template" class="page-header">
                     <a class="anchorjs-link " href="#html5" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                     模板问题
                 </h1>
            <h2 id="template-zeyuan">
                    <a class="anchorjs-link " href="#html5-rem" aria-label="Anchor link for: overview doctype" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                    泽元
                </h2>
            <div class="bs-callout bs-callout-info" id="callout-images-ie-svg">
              <h4>1.首页视频模板代码----------------------更新时间:20160929</h4>
              <h4>2.首页调用需要加入loadcontent="true" 否则无法调用到Video.Path和Video</h4>
              <h4>3.保证引用的flash地址正确</h4>
              <h4>4.需要修改播放器尺寸</h4>
            </div>
            <div class="highlight">
              <pre><code class="language-xml" data-lang="xml">
&lt;cms:video catalogid="23709" count="1" type="Recent" level="CurrentAndChild" loadcontent="true"&gt;
	&lt;z:list&gt;
	&lt;z:if condition="${Video.IsExternalURL=='Y'}"&gt;
		&lt;embed width="400" height="300" flashvars="&amp;streamer=start&amp;type=http&amp;autostart=true&amp;&amp;plugins=none&amp;image=${imageSize(Video.LogoFile,240,161)}&amp;file=${Video.ExternalSource}" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" quality="high" name="player" id="player"  src="../images/p.swf" type="application/x-shockwave-flash" autostart="true"&gt;
	&lt;/z:if&gt;
	&lt;z:else&gt;
		&lt;embed width="600" height="400" flashvars="&amp;streamer=start&amp;type=http&amp;autostart=true&amp;&amp;plugins=none&amp;image=${imageSize(Video.LogoFile,240,161)}&amp;file=${Video.Path}${Video.FileName}" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" quality="high" name="player" id="player"  src="../images/p.swf" type="application/x-shockwave-flash" autostart="true"&gt;
	&lt;/z:else&gt;
	&lt;/z:list&gt;
&lt;/cms:video&gt;
 </code></pre>
            </div>
            </h2>
            <div class="bs-callout bs-callout-info" id="callout-images-ie-svg">
              <h4>1.详细页视频模板代码----------------------更新时间:20160929</h4>
            </div>
            <div class="highlight">
              <pre><code class="language-xml" data-lang="xml">
&lt;z:if condition="${Video.IsExternalURL=='Y'}"&gt;
	&lt;embed width="400" height="300" flashvars="&amp;streamer=start&amp;type=http&amp;autostart=true&amp;&amp;plugins=none&amp;image=${imageSize(Video.LogoFile,240,161)}&amp;file=${Video.ExternalSource}" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" quality="high" name="player" id="player"  src="../images/p.swf" type="application/x-shockwave-flash" autostart="true"&gt;
&lt;/z:if&gt;
&lt;z:else&gt;
	&lt;embed width="600" height="400" flashvars="&amp;streamer=start&amp;type=http&amp;autostart=true&amp;&amp;plugins=none&amp;image=${imageSize(Video.LogoFile,240,161)}&amp;file=${Video.Path}${Video.FileName}" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" quality="high" name="player" id="player"  src="../images/p.swf" type="application/x-shockwave-flash" autostart="true"&gt;
&lt;/z:else&gt;
 </code></pre>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3" role="complementary">
        <nav id="doc-nav" class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top">
          <ul class="nav bs-docs-sidenav">
            <li class="">
              <a href="#overview">概览</a>
            </li>
            <li class="">
              <a href="#common">通用类</a>
              <ul class="nav">
                <li class="">
                  <a href="#common-pageheader">日常专题文档规范</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#pc">PC类</a>
              <ul class="nav">
                <li class="">
                  <a href="#pc-pageheader">通用头尾插件</a>
                </li>
                <li class="">
                  <a href="#pc-viewportFix">普通ＰＣ专题手机视窗适配方案</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#html5">html5类</a>
              <ul class="nav">
                <li class="">
                  <a href="#html5-rem">rem适配方案</a>
                </li>
                <li class="">
                  <a href="#up">点赞活动</a>
                </li>
              </ul>
            </li>
            </li>
            <li>
              <a href="#template">模板问题更新</a>
              <ul class="nav">
                <li class="">
                  <a href="#template-zeyuan">泽元</a>
                </li>
              </ul>
            </li>
          </ul>
          <a class="back-to-top" href="#top">返回顶部</a>
        </nav>
      </div>
    </div>
  </div>
  <footer class="bs-docs-footer" role="contentinfo">
    <div class="container">
      <p>本文档为内部文档。</p>
      <ul class="bs-docs-footer-links text-muted">
        <li>当前版本： v0.0.1</li>
        <li>·</li>
        <li><a href="http://git.oschina.net/aibokalv/TMDlibrary">GitHub 仓库</a></li>
        <li>·</li>
        <li><a href="http://www.kunming.cn/">关于我们</a></li>
        <li>·</li>
        <li>·</li>
        <li>·</li>
        <li>·</li>
      </ul>
    </div>
  </footer>
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/ZeroClipboard.min.js"></script>
  <script src="assets/js/anchor.min.js"></script>
  <script src="//cdn.bootcss.com/highlight.js/9.7.0/highlight.min.js"></script>
  <script src="assets/js/docs.js"></script>
</body>

</html>
